<template>
  <div class="screen-header">
    <div class="header-left">
      <div class="city">{{ city }}</div>
      <div class="temp">{{ temp }}</div>
      <div class="weather">{{ weather }}</div>
      <div class="weather-img">
        <img class="img" :src="qing" alt="weather-img" />
      </div>
    </div>

    <div class="header-center">长江下游数据运行中心</div>

    <div class="header-right">
      <div class="time">{{ nowTime }}</div>
      <div class="today">{{ arr[today]}}</div>
      <img class="close" :src="closeImg" alt="close" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from "vue";
  import { dayjs } from 'element-plus';
  const closeImg = new URL('@/assets/img/screen/close.png', import.meta.url).href;
  const qing = new URL('@/assets/img/weather/qing.png', import.meta.url).href;

  const city = ref('南京市');
  const temp = ref('20℃');
  const weather = ref('晴');
  // 当前时间 (时钟效果)
  const nowTime = ref<string>('');
  // 今天 (星期几)
  const today = ref<number>(new Date().getDay());
  const arr: string[] = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

  onMounted(() => {
    // 获取当前时间
    setInterval(() => {
      nowTime.value = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
    }, 1000);
  });
</script>

<style lang="less" scoped>
  @fontColor: #ffffff;
  .screen-header {
    width: 100%;
    box-sizing: border-box;
    padding-top: 17px;
    padding-left: 56px;
    padding-right: 56px;
    display: flex;
    justify-content: space-between;
    
    .header-left {
      display: flex;
      align-items: center;
      .weather-img {
        .img {
          width: 27px;
          height: 27px;
        }
      }
      .city, .temp, .weather {
        color: @fontColor;
        margin-right: 15px;
      }
    }
    .header-center {
      font-size: 50px;
      font-family: youshe;
      color: @fontColor;
      margin-left: 100px;
    }
    .header-right {
      display: flex;
      align-items: center;
      .time, .today {
        color: @fontColor;
        margin-right: 15px;
      }
      .close {
        width: 27px;
        height: 27px;
      }
    }
  }
</style>